<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <style>
    *{margin: 0;padding: 0}
    ul{list-style: none;line-height: 50px;}
    ul>li{display: inline-block;margin-right:20px;cursor: pointer}
    .form{
        position: absolute;
        left: 80%;
        top: 45%;
        transform: translate(-50%,-50%);
        width: 400px;
        height:525px;
        border: 1px solid#666;
        border-radius: 5px;
        text-align: center;
    }   
    ul{
        list-style: none;
    }
    li{
        display: inline-block;
    }
    input{
        box-sizing: border-box;
        width: 340px;
        height: 50px;
        margin-top: 50px;
        border: 1px solid#333;
    }
    fieldset{
        border: none;
    }
    .oth_type_tit {
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
    }
    .all-icons span{
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #333;
        position: relative;
    }
    .all-icons a{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url("images/icons_type.png")
    }
    .qq a{
        background-position-x: -19px;
    }
    .weibo a{
        background-position-x: -38px;
    }
    .pay a{
        width: 25px;
        background-position-x: -57px;
    }
    .wexin a{
        width: 24px;
        background-position-x: -76px;   
    }
    .current{
            color:orange;
        }
    
        #tab_content>div:last-child{
            display: none;
        }
        #tab_content{
            position: relative;
            height:350px;
            border-top: 1px solid #eee;
        }
        #tab_content>div{
            position: absolute;
            width:100%;
            height:350px;
        }
    </style>
</head>
<body>
    <div class="head">

    </div>
<div class="bj">
    <div class="form">
        <ul id="tab">
            <li class="current">账号登录</li>
            |
            <li>扫码登录</li>
        </ul>

        <form >
            <div id="tab_content">
                <div>
                    <p><input type="text" placeholder="请输入密码"/></p>
                    <p><input type="password" placeholder="请输入密码"/></p>
                    <a href="#"><p class="submit"><input type="submit" value="登录"></p></a>
                </div>
                <div>
                    <img src="images/sao.png" alt=""/>
                </div>
            </div>
        </form>
        <ul>
             <li>注册小米账号</li>
                <li>|</li>
                <li>忘记密码</li>
        </ul>
        <fieldset class="oth_type_tit">
            <legend align="center" class="oth_type_txt">其他登录方式</legend>
        </fieldset>
        <div class="all-icons">
            <span class="qq"><a href="#"></a></span>
            <span class="weibo"><a href="#"></a></span>
            <span class="weixin"><a href="#"></a></span>
            <span class="pay"><a href="#"></a></span>
        </div>
   </div>
</div>

<div class="bottom">
    <div class="footer">
                <a href="#" class="hanzi">简体</a>
                |
                <a href="#" class="hanzi">繁体</a>
                |
                <a href="#" class="hanzi">English</a>
                |
                <a href="#" class="hanzi">常见问题</a>
                |
                <a href="#" class="hanzi">隐私政策</a>
    </div>
   
<div>       
    小米公司版权所有-京ICP备10046444-

    <img src="images/ghs.png" alt=""/> 
   
   京公网安备11010802020134号--京ICP证110507号
</div> 
<script>
    var $lis = $("#tab>li");
    for(var i=0;i<$lis.length;i++){
        $lis[i].index=i;
    }
    $lis.click(function(){
        $(this).addClass("current").siblings().removeClass("current");
        $("#tab_content").children().hide().eq(this.index).show();
    });
</script>
</body>
</html>